import {Image, Input, Text, View} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import {immutable} from 'wmkit'
import * as T from '../types';
import '../css/store.less';
import '../css/index.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import PictureCom from './picture-com';
import Enclosure from './enclosure';
import plus from '../img/plus.png';
import Price from '@/pages/common/goods/price';
import noneImg from '../img/none.png';
import arrow from '@/assets/image/common/arrow.png';

type IStoreItemProps = T.IProps & T.IStoreItemProps;

const TYPES = {
  '0': '满减优惠',
  '1': '满折优惠',
  '2': '满赠优惠',
};

const INVOICE_TYPE = {
  '0': '不支持开票',
  '1': '不需要发票',
  '2': '普通发票',
  '3': '增值税发票',
};

@connect<Partial<IStoreItemProps>, T.IStoreItemState>(store2Props, actions)
export default class Store extends Component<Partial<IStoreItemProps>, T.IStoreItemState> {
  constructor(props: IStoreItemProps) {
    super(props);
  }

  render() {
    let {
      actions: {action},
      actions,
      myStore,
      main,
      main: {
        stores,
        orderList: {invoiceData, buyRemark, enclosures},
      },
    } = this.props;
    const {supplier, tradeItems, gifts} = myStore;
    const allSkus = tradeItems.concat(gifts);
    const cartList = allSkus
      .filter((sku, index) => index < 4)
      .map((sku) => {
        return {
          url: sku.pic,
        };
      });
    const {discountsPrice, tradePrice} = myStore;

    const prices = (immutable.fromJS(discountsPrice) || immutable.fromJS([])).groupBy((item) => item.get('type')).toArray();
    const invoiceType = invoiceData && invoiceData[supplier.supplierId]['supportInvoice'];
    console.log('main', stores);
    return (
      <View className="confirm-store">
        <View className="confirm-store-left">
          {supplier.isSelf && (
            <View className="confirm-store-type">
              <Text className="confirm-store-type-text">自营</Text>
            </View>
          )}
          <Text className="confirm-store-name">{supplier.storeName}</Text>
        </View>

        {/* 只有一个店铺显示明细,只有一个店铺跳转到商品详情页，不跳转到清单页 */}
        {stores && stores.length == 1 ? (
          <View className="order-confirm-middle-detail">
            {allSkus
              ? allSkus.map((item, index) => {
                  return (
                    <View
                      key={index}
                      className="product-item"
                      onClick={async () => {
                        await action._urlChange(5, item);
                      }}
                    >
                      <Image className="img-item" key={item.oid} src={item.pic ? item.pic : noneImg} />
                      <View className="good-info">
                        <View className="good-info-detail">
                          {item.isGift && (
                            <View className="gift-sku-icon">
                              <Text className="gift-sku-text">赠品</Text>
                            </View>
                          )}
                          <View className="name">{item.skuName}</View>
                          <View className="specDetails">{item.specDetails ? item.specDetails : ''}</View>
                        </View>
                        <View className="right">
                          <View className="price">
                            <Price price={item.isGift ? 0 : item.price} buyPoint={item.buyPoint} />
                          </View>
                          <View className="number">{'x' + item.num}</View>
                        </View>
                      </View>
                    </View>
                  );
                })
              : null}
          </View>
        ) : (
          <View
            className="order-confirm-store-item"
            onClick={async () => {
              await action._urlChange(3, supplier.storeId);
            }}
          >
            <View className="sku-pic-list">
              {cartList.slice(0, 4).map((item, index) => (
                <PictureCom key={index} type={0} url={item.url} />
              ))}
            </View>
            <View className="store-item-right">
              <Text className="item-text">{allSkus.length}</Text>
              <Image className="arrow-img" src={arrow} />
            </View>
          </View>
        )}

        <View
          className="order-store-item"
          onClick={async () => {
            invoiceType && (await action._urlChange(2, supplier.supplierId));
          }}
        >
          <Text className="order-item-label">发票信息</Text>
          <View className="store-item-right">
            <Text className="item-text">{INVOICE_TYPE[invoiceType]}</Text>
            {invoiceType !== 0 && INVOICE_TYPE[invoiceType] != '不需要发票' && (
              <Image className="arrow-img" src={arrow} />
            )}
          </View>
        </View>

        <View className="order-store-item">
          <Text className="order-item-label">订单备注</Text>

          <View className="order-item-input">
            <Input
              maxlength={100}
              value={buyRemark[supplier.storeId]}
              placeholder="点击输入，100字以内"
              className="invoice-input"
              onInput={(e) => {
                action._orderBuyRemarkChange(supplier.storeId, e.detail.value);
              }}
            />
          </View>
        </View>

        <View
          className="order-store-item"
          onClick={async () => {
            await this._chooseImage(enclosures, supplier.storeId);
          }}
        >
          <Text className="order-item-label">订单附件</Text>
          <View className="store-item-right">
            <Text className="item-input-text" decode={true}>
              上传图片&ensp;
            </Text>
            <Image className="arrow-img" src={plus} />
          </View>
        </View>

        {/*附件图片列表*/}
        <Enclosure storeId={supplier.storeId} />

        {prices.map((val, key) => {
          const price = val.map((v) => v.get('amount')).reduce((a, b) => (a += b));
          return (
            price && (
              <View className="order-store-item" key={key}>
                <Text className="order-item-label">{TYPES[key]}</Text>
                <View className="store-item-right">
                  <Text className="item-text">-¥{actions._addZero(price)}</Text>
                </View>
              </View>
            )
          );
        })}
      </View>
    );
  }

  _chooseImage = async (enclosures, storeId) => {
    if (enclosures && enclosures[storeId] && enclosures[storeId].length === 10) {
      await Taro.showToast({
        title: '最多上传10张哦~',
        icon: 'none',
        duration: 1000,
      });
      return;
    }
    await this.props.actions.action._chooseImage(storeId);
  };
}

//create by moon https://github.com/creasy2010/moon
